<template>
  <a-page-header
      title="存储源配置"
      style="padding: 0"
      sub-title="此页可以维护您的存储源信息"
  />
  <div class="storage-list flex warp">
    <div class="item" v-if="form.localPath">
      <div class="head flex alignCenter end">
<!--        <delete-outlined @click="delStorage(0)"/>-->
      </div>
      <div class="content">
        <div class="top flex column alignCenter">
          <div class="imgBox flex alignCenter center">
            <img src="@/assets/icons/folder.png"/>
          </div>
          <span>本地</span>
        </div>
        <div class="bottom flex alignCenter center">
          <a-tag color="processing" style="margin-right: 10px">本地存储</a-tag>
          <a-tag color="success" v-if="form.type===0">启用</a-tag>
          <a-tag color="error" v-else>停用</a-tag>
        </div>
      </div>
      <div class="footer flex alignCenter">
        <div class="but flex alignCenter center"  @click="edit(0)">
          <form-outlined/> 编辑
        </div>
        <div class="but flex alignCenter center">
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMoreOperations">
                <a-menu-item key="0">
                  {{form.type===0?'停用':'启用'}}
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="text">
              <ellipsis-outlined/>更多
            </a-button>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="item" v-if="form.qiNiuAccessKey">
      <div class="head flex alignCenter end">
        <delete-outlined @click="delStorage(1)"/>
      </div>
      <div class="content">
        <div class="top flex column alignCenter">
          <div class="imgBox flex alignCenter center">
            <img src="@/assets/icons/storage/qiniu.png"/>
          </div>
          <span>七牛云</span>
        </div>
        <div class="bottom flex alignCenter center">
          <a-tag color="processing" style="margin-right: 10px">七牛云</a-tag>
          <a-tag color="success" v-if="form.type===1">启用</a-tag>
          <a-tag color="error" v-else>停用</a-tag>
        </div>
      </div>
      <div class="footer flex alignCenter">
        <div class="but flex alignCenter center"  @click="edit(1)">
          <form-outlined/> 编辑
        </div>
        <div class="but flex alignCenter center">
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMoreOperations">
                <a-menu-item key="1">
                  {{form.type===1?'停用':'启用'}}
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="text">
              <ellipsis-outlined/>更多
            </a-button>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="item" v-if="form.aliYunAccessKeyId">
      <div class="head flex alignCenter end">
        <delete-outlined @click="delStorage(2)"/>
      </div>
      <div class="content">
        <div class="top flex column alignCenter">
          <div class="imgBox flex alignCenter center">
            <img src="@/assets/icons/storage/ali.png"/>
          </div>
          <span>阿里云OSS</span>
        </div>
        <div class="bottom flex alignCenter center">
          <a-tag color="processing" style="margin-right: 10px">阿里云OSS</a-tag>
          <a-tag color="success" v-if="form.type===2">启用</a-tag>
          <a-tag color="error" v-else>停用</a-tag>
        </div>
      </div>
      <div class="footer flex alignCenter">
        <div class="but flex alignCenter center"  @click="edit(2)">
          <form-outlined/> 编辑
        </div>
        <div class="but flex alignCenter center">
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMoreOperations">
                <a-menu-item key="2">
                  {{form.type===2?'停用':'启用'}}
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="text">
              <ellipsis-outlined/>更多
            </a-button>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="item" v-if="form.qCloudAppId">
      <div class="head flex alignCenter end">
        <delete-outlined @click="delStorage(3)"/>
      </div>
      <div class="content">
        <div class="top flex column alignCenter">
          <div class="imgBox flex alignCenter center">
            <img src="@/assets/icons/storage/tencent.png"/>
          </div>
          <span>腾讯云COS</span>
        </div>
        <div class="bottom flex alignCenter center">
          <a-tag color="processing" style="margin-right: 10px">腾讯云COS</a-tag>
          <a-tag color="success" v-if="form.type===3">启用</a-tag>
          <a-tag color="error" v-else>停用</a-tag>
        </div>
      </div>
      <div class="footer flex alignCenter">
        <div class="but flex alignCenter center"  @click="edit(3)">
          <form-outlined/> 编辑
        </div>
        <div class="but flex alignCenter center">
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMoreOperations">
                <a-menu-item key="3">
                  {{form.type===3?'停用':'启用'}}
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="text">
              <ellipsis-outlined/>更多
            </a-button>
          </a-dropdown>

        </div>
      </div>
    </div>
    <div class="item" v-if="form.sftpHost">
      <div class="head flex alignCenter end">
        <!--        <delete-outlined @click="delStorage(0)"/>-->
      </div>
      <div class="content">
        <div class="top flex column alignCenter">
          <div class="imgBox flex alignCenter center">
            <img src="@/assets/icons/folder.png"/>
          </div>
          <span>SFTP</span>
        </div>
        <div class="bottom flex alignCenter center">
          <a-tag color="processing" style="margin-right: 10px">SFTP</a-tag>
          <a-tag color="success" v-if="form.type===4">启用</a-tag>
          <a-tag color="error" v-else>停用</a-tag>
        </div>
      </div>
      <div class="footer flex alignCenter">
        <div class="but flex alignCenter center"  @click="edit(4)">
          <form-outlined/> 编辑
        </div>
        <div class="but flex alignCenter center">
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMoreOperations">
                <a-menu-item key="0">
                  {{form.type===4?'停用':'启用'}}
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="text">
              <ellipsis-outlined/>更多
            </a-button>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="item add flex alignCenter center"
         style="cursor: pointer"
    @click="edit('')"
    >

      <plus-outlined style="font-size: 26px;color: #9da2ab"/>

    </div>

    <add-or-update v-model="open" @success="getList" :config="form"
    :storageType="storageType"
    />
  </div>
</template>
<script setup lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import {message,RadioGroupProps} from "ant-design-vue";
import {FormOutlined,DeleteOutlined,
  PlusOutlined,EllipsisOutlined} from '@ant-design/icons-vue'
import addOrUpdate from './add-or-update.vue'
import {queryConfigList,updateConfig} from '@/api/sys-setting/config.ts'
import {OssConfigDetail} from "@/types/global.ts";
defineComponent({
  FormOutlined,
  DeleteOutlined,
  PlusOutlined,
  EllipsisOutlined,
  addOrUpdate
})
const activeKey = ref(0)
const open = ref(false);
const form = ref<OssConfigDetail>({});
const storageType = ref(null)
const radioOptions: RadioGroupProps['options'] = [
  { label: '本地', value:  0},
  { label: '腾讯云', value: 3 },
  { label: '阿里云', value:2},
  { label: '七牛云', value: 1 },
  { label: 'SFTP', value: 4 },
];
const generateQueryFrom = ()=>{
  return{
    pageNo:1,
    pageSize:5
  }
}
const generatePagination = ()=>{
  return{
    current:1,
    pageSize:5,
    total:0,
    showSizeChanger:false
  }
}
const queryFrom = ref(generateQueryFrom())
const pagination = ref(generatePagination())
const submitForm = ref({
  paramKey:'',
  paramValue:'',
  remark:''
})

const getList = ()=>{
  queryConfigList(queryFrom.value).then((res:any)=>{
    submitForm.value = res.result.records[0];
    form.value = JSON.parse(submitForm.value.paramValue);
    form.value.type = parseInt( form.value.type)
    pagination.value.total = res.result.total
  })
}
const delStorage = (type)=>{
  const arr = ['local','qiNiu','aliYun','qCloud'];
  const obj = {...form.value}
  const keys = Object.keys(obj);
  keys.forEach(item=>{
    if(item.startsWith(arr[type])||!obj[item]){
      delete obj[item]
    }

  })
  obj.type = 0
  submitForm.value.paramValue = JSON.stringify(obj);
  updateConfig(submitForm.value).then(()=>{
    message.success('操作成功');
    getList();
  })
}
const edit = (type)=>{
  storageType.value = type;
  open.value = true;
}

const handleMoreOperations = ({key})=>{
  console.log(key)
  form.value.type = form.value.type==key?-1:key;
  submitForm.value.paramValue = JSON.stringify(form.value)
/*
  submitForm.value.paramValue = JSON.stringify({"localDomain":"http://localhost:9001/net-disk/files","localPath":"D:/downloads/net-disk","qCloudBucketName":"file-1317232546","qCloudDomain":"https://file-1317232546.cos.ap-shanghai.myqcloud.com","qCloudPrefix":"net-disk","qCloudSecretId":"AKIDeRLNVbrHgDqRvEQURLNOUhklrw1ERbvH","qCloudSecretKey":"dK0qeSNKQnATm4HdCDmWJIIJJHB021vr","qCloudAppId":"1317232546","qCloudRegion":"ap-shanghai","type":"1","qiNiuAccessKey":"oh0lhqfhi5fr2qjL2VTLL_qfL8hSvJqpRg6zFrOc","qiNiuBucketName":"qcy-bucket","qiNiuDomain":"http://qiniu.qcycloud.com","qiNiuSecretKey":"-X-2-E-3N2OkkYsF8CTUUk5OSUWwYixvcyYEVoVN","qiNiuPreViewEncryptKey":"45a8cf996f88409b4a8944a95eba1eb8398a0f9a"})
*/

  updateConfig(submitForm.value).then(()=>{
    message.success('操作成功');
    getList();
  })
}


onMounted(()=>{
  getList();
})
</script>
<style scoped lang="scss">
$borderColor:#e7e7e7;
.storage-list{
  margin: 10px 0;
  .item{
    width: 220px;
    min-height: 234px;
    border-radius: 10px;
    border: 1px solid $borderColor;
    margin: 5px 10px ;
    .head{
      padding: 10px;
    }
    .top{
      span{
        margin: 10px 0;
        color: #9da2ab;
      }
      .imgBox{
        width:80px;
        height: 80px;
        border-radius: 50%;
        background-color:#eff6ff ;
        img{
          width: 60%;
          height: 60%;
        }
      }
    }
    .bottom{
      margin: 10px 0;
    }
    .footer{
      height: 45px;
      border-top: 1px solid $borderColor;
      color: #5f5f5f;
      div:first-child{
        border-right: 1px solid $borderColor;
      }
      div{
        width:50%;
        cursor:pointer;
        :deep(.anticon){
          font-size: 14px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
